<template>
  <div>
    <mytop :title="title" />
    <div class="cates">
      <div class="left">
        <div
          v-for="(cate, index) in cates"
          :key="cate.id"
          @click="change(index)"
          :class="['cate',{
            active: index===num
          }]"
        >{{cate.name}}</div>
      </div>
      <div class="right">
        <div v-if="show" class="itemimg">
            <img src="/1.jpg" alt />
          </div>
        <div class="item" v-for="item in items" :key="item.id">
          <van-card
            :num="item.num"
            :price="item.minPrice"
            :title="item.name"
            :desc="item.characteristic"
            :thumb="item.pic"
          />
        </div>
      </div>
    </div>
    <mytabbar />
  </div>
</template>

<script>
import mytop from 'components/My-Top'
import mytabbar from 'components/My-Tabbar'
import { fetchFenlei, fenleiById } from 'api'
export default {
  data () {
    return {
      title: '分类',
      cates: [],
      items: [],
      num: 0,
      show: false
    }
  },
  created () {
    this.fetchCates()
    console.log(this.items)
  },
  methods: {
    change (index) {
      this.num = index
      this.fetchItems()
    },
    fetchCates () {
      fetchFenlei().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          this.fetchItems()
        }
      })
    },
    fetchItems () {
      this.items = []
      fenleiById({
        categoryId: this.cates[this.num].id
      }).then((res) => {
        console.log(res.data.data)
        if (res.data.code === 0) {
          this.items = res.data.data
          this.show = false
        } else {
          this.show = true// 没有数据显示暂无数据的判断
        }
        console.log(this.show)
      })
    }
  },
  components: {
    mytop,
    mytabbar
  }
}
</script>

<style lang="scss" scoped>
.cates {
  margin-top: 46px;
  margin-bottom: 50px;
}
.cates {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 50px;
  background-color: #f1f1f1;
  display: flex;
  .left {
    width: 30%;
    border-right: 1px solid #333;
    height: 100%;
    .cate {
      line-height: 40px;
      font-size: 14px;
      color: #333;
      background-color: #fafafa;
      text-align: center;
      &.active {
        background-color: #3333;
        color: #f1f1f1;
      }
    }
  }
  .right {
    width: 70%;
    height: 100%;
    .itemimg{
         img{
           width: 100%;
           height: 40%;
         }
    }
  }

}
</style>
